<!--
 * @author luguoxiang
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <view class="content">
    <lg-icon name="logo" class="logo" />
    <view class="welcome">您好，欢迎使用</view>
    <view class="company">lg-soar系统~</view>
    <view class="body">
      <uni-forms ref="formRef" :modelValue="model" label-width="0">
        <uni-forms-item name="account" :rules="[{ required: true, errorMessage: '请输入用户名' }]">
          <view class="input-item">
            <lg-icon name="user" size="24px" />
            <uni-easyinput type="text" :inputBorder="false" v-model="model.account" placeholder="请输入账号：admin" class="input" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="password" :rules="[{ required: true, errorMessage: '请输入密码' }]">
          <view class="input-item">
            <lg-icon name="lock" size="24px" />
            <uni-easyinput type="password" :inputBorder="false" v-model="model.password" placeholder="请输入登录密码：123456" class="input"/>
          </view>
        </uni-forms-item>
        <uni-forms-item v-if="captchaFlag" name="captcha" :rules="[{ required: true, errorMessage: '请输入验证码' }]">
          <view style="display: flex;">
            <view class="input-item">
              <lg-icon name="security" size="24px" />
              <uni-easyinput type="text" :inputBorder="false" v-model="model.captcha" placeholder="验证码" class="input" />
            </view>
            <image :src="image" class="image" @click="getCode()" />
          </view>
        </uni-forms-item>
        <uni-forms-item>
          <view class="btn-submit" @click="submit">登录</view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="bottom">
      登录即代表已阅读并同意<navigator class="link">《用户协议》</navigator>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { captcha } from "@/api/common";
import { account } from "@/api/login";
import configApi from "@/api/sysConfig";
import { env } from "@/config"
import {loadAccountInfo} from "@/store/account";

const model = ref(env === 'prod' ? {} : { account: 'admin', password: '123456' });
const formRef = ref();
const image = ref();
const captchaFlag = ref(false);

function getCode() {
  captcha('login').then(res => {
    image.value = res.data;
  })
  model.value.captcha = ''
}

function submit() {
  formRef.value.validate().then((data)=>{
    account(data).then(res => {
      loadAccountInfo();
      uni.switchTab({
        url: '/pages/index/home'
      })
    }).catch(getCode).finally(() => {
      uni.hideLoading();
    })
    uni.showLoading()
  })
}

configApi.get('login').then((res) => {
  captchaFlag.value = res.captcha;
  if (res.captcha) {
    getCode();
  }
});
</script>

<style lang="scss" scoped>
.content {
  background-image:url('@/static/images/login-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
  .logo {
    position: absolute;
    left: 30px;
    top: 67px;
    width: 33px;
    height: 33px;
  }
  .welcome {
    position: absolute;
    left: 30px;
    top: 110px;
    height: 29px;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #1A2233;
  }
  .company {
    position: absolute;
    left: 30px;
    top: 147px;
    height: 32px;
    font-size: 22px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #1A2233;
  }
  .body {
    position: fixed;
    top: 206px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 20px 20px 0 0;
    background: #FFFFFF;
    padding: 34px 32px;
    :deep(.uni-forms-item) {
      margin-bottom: 24px;
    }
    .input-item {
      display: flex;
      align-items: center;
      background: #F0F3FB;
      height: 42px;
      border-radius: 8px;
      padding: 0 8px;
      .input {
        flex: 1;
        padding-left: 8px;
        :deep(.uni-easyinput__content) {
          background: #F0F3FB !important;
        }
        :deep(.uni-input-placeholder),
        :deep(.uni-input-input) {
          font-size: 16px;
        }
      }
    }
    .image {
      width: 81px;
      min-width: 81px;
      height: 42px;
      border-radius: 8px;
      margin-left: 16px;
    }
    .btn-submit {
      line-height: 42px;
      border-radius: 8px;
      background: #1659ED;
      color: #FFFFFF;
      text-align: center;
    }
  }
  .bottom {
    position: fixed;
    bottom: 61px;
    width: 100%;
    height: 20px;
    opacity: 0.9;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #616161;
    .link {
      color: #1659ED;
      display: inline-block;
    }
  }
}
</style>
